<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>YOLOv8 训练报告 - Fake</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background: #f4f6f8;
            
        }
        h1 {
            color: #333;
            margin: 0 auto;
            width: 400px;
        }
        .chart-container {
            width: 800px;
            margin: 40px auto;
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <h1>YOLOv8 模型训练报告</h1>

    <div class="chart-container">
        <h2>各类别检测指标</h2>
        <canvas id="metricsChart"></canvas>
    </div>

    <div class="chart-container">
        <h2>训练损失变化曲线</h2>
        <canvas id="lossChart"></canvas>
    </div>

    <script>
        const ctx1 = document.getElementById('metricsChart').getContext('2d');
        new Chart(ctx1, {
            type: 'bar',
            data: {
                labels: ['other_clothes', 'hat', 'reflective_clothes', 'person'],
                datasets: [
                    {
                        label: 'Precision (P)',
                        data: [0.982, 0.995, 0.988, 1.0],
                        backgroundColor: '#4caf50'
                    },
                    {
                        label: 'Recall (R)',
                        data: [0.975, 0.990, 0.992, 1.0],
                        backgroundColor: '#2196f3'
                    },
                    {
                        label: 'mAP@0.5',
                        data: [0.981, 0.997, 0.990, 1.0],
                        backgroundColor: '#ff9800'
                    },
                    {
                        label: 'mAP@0.5:0.95',
                        data: [0.956, 0.984, 0.969, 0.998],
                        backgroundColor: '#9c27b0'
                    }
                ]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        min: 0,
                        max: 1
                    }
                }
            }
        });

        const ctx2 = document.getElementById('lossChart').getContext('2d');
        new Chart(ctx2, {
            type: 'line',
            data: {
                labels: Array.from({length: 50}, (_, i) => `Epoch ${i + 1}`),
                datasets: [{
                    label: 'Total Loss',
                    data: Array.from({length: 50}, (_, i) => (Math.exp(-i/10) * 2 + Math.random() * 0.05).toFixed(2)),
                    borderColor: '#e91e63',
                    backgroundColor: 'rgba(233, 30, 99, 0.2)',
                    fill: true,
                    tension: 0.3
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>
</html>
